<div style="text-align: center; margin: 20px;">
	<button ui-sref="forum-unread-topics()" class="btn btn-default btn-xs" translate="FORUM.SHOW_UNREAD"></button>
	<button ui-sref="forum-search()" class="btn btn-default btn-xs" translate="FORUM.SEARCH"></button>
	<button ui-sref="forum-user-posts({id: vm.currentUser.id, username: vm.currentUser.username})" class="btn btn-default btn-xs" translate="FORUM.SHOW_MY_POSTS"></button>
	<button ng-click="vm.markAllTopicsAsRead(); vm.markingTopics = true;" ng-disabled="vm.markingTopics" class="btn btn-default btn-xs" translate="FORUM.MARK_ALL_AS_READ"></button>
</div>

<loading-indicator hide="vm.forums"></loading-indicator>

<div ng-show="vm.currentUser.parkerad == 1" class="alert alert-warning" role="alert">{{ 'GENERAL.ACCOUNT_PARKED' | translate }}</div>

<div class="col-md-10 col-centered" ng-show="vm.forums && vm.currentUser.parkerad == 0">
	<table class="table table-striped table-hover table-nowrap table-text-center forumtable">
		<tr ng-repeat-start="header in ::vm.forums">
			<th class="text-left">{{ ::header.name }}</th>
			<th class="hidden-sm hidden-xs" style="width: 100px;" translate="FORUM.THREADS"></th>
			<th class="hidden-sm hidden-xs" style="width: 100px;" translate="FORUM.POSTS"></th>
			<th class="hidden-xs text-left" style="width: 300px;" translate="FORUM.LAST_POST"></th>
		</tr>
		<tr ng-repeat-end ng-repeat="forum in ::header.forums">
			<td class="text-left">
				<img class="forum-icon unlocked-new" ng-if="forum.topic.post.id > forum.topic.lastPostRead" />
				<img class="forum-icon unlocked" ng-if="forum.topic.post.id <= forum.topic.lastPostRead" />
				<a href="#" ng-click="vm.setForum(forum)" ui-sref="forum.topics({id: forum.id})"><b>{{ ::forum.name }}</b></a><br/>
				{{ ::forum.description }}
			</td>
			<td class="text-middle hidden-sm hidden-xs">{{ ::forum.topiccount }}</td>
			<td class="text-middle hidden-sm hidden-xs">{{ ::forum.postcount }}</td>
			<td class="text-left hidden-xs">
				{{ ::forum.topic.post.added }}<br />
				{{ 'FORUM.BY' | translate }} <user user="forum.topic.user" show-class="false" show-icons="false"></user>
				{{ 'FORUM.IN' | translate }} <b><a ui-sref="forum.topic({id: forum.topic.id, forumid: forum.topic.forumid, page: ceil(forum.topic.post.postcount/postsPerPage), 'lastpost': 1, slug: forum.topic.slug})">{{ ::forum.topic.subject }}</a></b>
			</td>
		</tr>
	</table>
	<br />
	<div class="col-md-8 col-md-push-2" style="background-color: #f9f9f9; border: 1px solid #ddd; padding: 6px;">
		<span ng-repeat="user in ::vm.onlineUsers"><user user="user" show-class="false"></user> </span>
	</div>
</div>
